<template>
	<div class="AreaGame">
		<AreaGame-header></AreaGame-header>
		<div class="main">
			<template>
				<router-link
					v-for="item of list"
			        :key="item.aid"
			        :to="{name:'DataBankDeatil',params:{title:item.name_zh,id:item.leagueId}}"
			        class='list'
				>
					<p>{{ item.name_zh }}</p>
					<span class="iconfont">&#xe606;</span>
				</router-link>
			</template>
		</div>
		
	</div>	
</template>
<script>
import AreaGameHeader from './components/Header'
import axios from 'axios'
import { Toast,Indicator  } from 'mint-ui'
export default {
	name: 'AreaGameList',
	components:{
		AreaGameHeader,
	},
	data:function(){
		return {
			list:[],
		}
	},
	methods:{
		getList(id){
			Indicator.open({
			  text: '加载中···',
			  spinnerType: 'fading-circle'
			});
        	var t = this;
          	axios.get('/api/getLeaguesByCountry.php?countryId='+id)
	            .then(function(res) {
	            	res = res.data
			        if (res.status == 0 && res.data) {
			            const data =  res.data
			            t.list = data;
			            Indicator.close();
			            if (!data) {
			            	Toast('没有数据');
			            }
			       }
	            })
            	.catch(function (error) {
	                Toast(error);
	            });
		},
		getParams(){
	        // 取到路由带过来的参数
	        const routerCountryId = this.$route.query.countryId
	        return {
	        	'countryId':routerCountryId,
	        }
	    }
	},
	mounted () {
		const t = this;
      	const isRouterQuery = t.getParams();
	    t.getList(isRouterQuery.countryId)
	},
};
</script>
<style lang="less" scoped>
	@import '~styles/varibles.less';
	.main{
		padding: 1rem 0.3rem .3rem;
	}
	.list{
		margin: .3rem 0rem 0;
		background: @bggray;
		height: .86rem;
		line-height: .86rem;
		border:1px #E2E2E2 solid;
		border-radius: 2px;
		display: flex;
		justify-content: space-between;
		font-size: .3rem;
		padding:0 .3rem;
		color: #4F4F4F;
		.iconfont{
			color: @grayColor2
		}
	}
</style>
